Using plotly and streamlit for interactive visualization

Using plotly and streamlit for interactive visualization#

Note

If you have not yet set up Python on your computer, you can execute this tutorial in your browser via Google Colab. Click on the rocket in the top right corner and launch “Colab”. If that doesn’t work download the .ipynb file and import it in Google Colab.

Then install the following packages by executing the following command in a Jupyter cell at the top of the notebook.

!pip install -q pandas plotly streamlit

There are many Python-based interactive plotting and dashboarding libraries out there. Here, we use plotly.express, which is a high-level API for plotly plots in combination with the dashboarding package streamlit.

In this tutorial, we will build a small dashboard to interactively explore power plants in 50 lines of code.

You can see a live demo of the final product here: https://ppm-dash.streamlit.app/

Package Imports#

import pandas as pd
import plotly.express as px
import plotly.io as pio
import plotly.offline as py

Note

We need to import plotly.io and plotly.offline, so that the interactive plots are also visible on the course’s static website.

Let’s reload again our example dataset of conventional power plants in Europe as a pd.DataFrame, which also contains coordinates (latitude and longitude).

fn = "https://raw.githubusercontent.com/PyPSA/powerplantmatching/master/powerplants.csv"
ppl = pd.read_csv(fn, index_col=0)

Hard coal power plants in Europe:

df = ppl.query("Fueltype == 'Hard Coal'")

px.scatter_mapbox(
    df,
    lat="lat",
    lon="lon",
    mapbox_style="carto-positron",
    color="DateIn",
    size="Capacity",
    zoom=2,
    height=600,
)

Since streamlit does not work so well in Jupyter Notebooks, we will now switch to another repository on Github to embed this interactive figure in a dashboard.

Exercises#

Task 1: Get the dashboard to run on your own laptop, but rather than showing power plant data, choose another dataset from Global Energy Monitor (e.g. LNG terminals or steel plants).

Note

You can directly download the other Global Energy Monitor files from https://tubcloud.tu-berlin.de/s/RG8Xbye3nMJB2Rp.

Excel files can be read with pandas using pd.read_excel():

url = "https://tubcloud.tu-berlin.de/s/RG8Xbye3nMJB2Rp/download/Europe-Gas-Tracker-2024-05.xlsx"
lng = pd.read_excel(url, sheet_name='LNG terminals - data')

Note

In principle, it is also possible to run streamlit from Google Colab, but it requires a few “tricks” and it might not be super fast.

First, you need to install and start up a tunnelling service like Cloudfare:

!wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64
!chmod +x cloudflared-linux-amd64
!nohup /content/cloudflared-linux-amd64 tunnel --url http://localhost:8501 &

Second, write your code for the streamlit application in a single cell with the header:

%%writefile app.py

Third, start the application:

!streamlit run /content/app.py &>/content/logs.txt &
!grep -o 'https://.*\.trycloudflare.com' nohup.out | head -n 1 | xargs -I {} echo "Your tunnel url {}"
Contents